import React, { Component } from 'react'
import Chart from 'chart.js/auto';
export default class ChartJs extends Component {
  constructor(props){

    super(props)
   
  

    this.canvas = props.canvas
    this.dataset1 = props.dataset1
    this.dataset2 = props.dataset2
    this.line = props.line
    this.datasetbordercolor = ['red','blue','green','orange'];
  }
  
 

   updateChart = () =>{
        this.chart.data.datasets[2].data=this.line
        this.chart.update()
        this.forceUpdate()
   }

   componentDidMount(){
    console.log(this.canvas);
    var data
    if(typeof(this.props.datasetnum)!='undefined'){
      console.log(1);
      var dataset =[]
      for(let i =0 ;i<this.props.datasetnum;i++){
        dataset[i] = {
          label: `Dataset${i+1}`,
          data : this.props[`dataset${i+1}`],
          borderColor : `${this.datasetbordercolor[i]}`, 
          animation: {
            duration: 0,
          },    
        }
      }
      dataset[dataset.length] = {
        label: 'Line 1',
        type: 'line',
        data: this.line,
        animation: {
          duration: 500,
        }
      }
      data = {datasets : dataset}
      console.log(data);
    }else{
    data = {
        datasets: [
            {
            label: 'Dataset 1',
            data: this.dataset1,
            borderColor: 'red',
            animation: {
              duration: 0,
            },
            },
            {
            label: 'Dataset 2',
            data: this.dataset2,
            borderColor: 'blue',
            animation: {
              duration: 0,
            },
            },
            {
            label: 'Line 1',
            type: 'line',
            data: this.line,
            animation: {
              duration: 500,
            },
            }
        ]
    };
  }
    const config = {
        type: 'scatter',
        data: data,
        options: {
            
            scales: {
                x: {
                  display: true,
                  title: {
                    display: true
                  },
                  min :0,
                  max :10,
                },
                y: {
                  display: true,
                  title: {
                    display: true,
                    text: 'Value'
                  },
                  min :0,
                  max :10,
                }
              }
        },
        
       
    }
    this.chart = new Chart(document.getElementById('canvasChart'),config)
   }
   handleClick = () =>{
       console.log('cl');
   }
   render() {
    return (
      <div id = 'rootChart'>

        <input id = 'buttonChart' type='button' value = '设置' onClick={this.handleClick}/>
        <canvas id ='canvasChart' width="600px" height="600px"></canvas>
      </div>
    )
  }
}
